<template>
  <div class="student-management">
    <h2>学生信息展示 (公开)</h2>

    <el-table :data="students" border style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="username" label="关联用户名"></el-table-column> <!-- 如果后端返回了username -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="group_id" label="组别"></el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange"
      style="margin-top: 20px"
    />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      students: [],
      total: 0,
      pageSize: 5, 
      currentPage: 1,
    };
  },
  mounted() {
    this.fetchStudents(this.currentPage);
  },
  methods: {
    async fetchStudents(page) {
      try {
        const res = await axios.get(`/api/students/display/?page=${page}&page_size=${this.pageSize}`);
        this.students = res.data.results;
        this.total = res.data.count;
      } catch (error) {
        console.error("获取学生信息失败:", error);
        this.students = [];
        this.total = 0;
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchStudents(page);
    },
  }
};
</script>

<style scoped>
.student-management {
  padding: 20px;
}
</style>